<template>
	<div :style="{width:'100%',height:'600px',overflow:'hidden'}">
		<div style="max-height: 150px;margin-top:20px;">
			<div style="width:100%;height: 100px;float: left;display: flex; align-items: center; justify-content: center;flex-wrap: wrap;">
				<img src="../../../static/logo.png" style="margin-top:15px;margin-bottom:5px;width: 80px;height: auto;"/>
			</div>
			<label style="font-size:2rem;font-weight:bold;width:100%;float: left;text-align: center;">一路书香 一生阳光</label>
			<div v-if="!showdetail" style="width:100%;height:40px;float: left;text-align: center;">
				<span style="font-size:1rem;color:#888;">输入学生姓名与身份证号，即可查看学生分班情况</span>
			</div>
		</div>
		<div v-if="!showdetail"  style="width:100%;float: left;">
			<Form ref="params" :model="params" :rules="ruleValidate" :label-width="0" label-position="right">
				<div style="width:100%;height: 400px; overflow:hidden;margin-top:50px;">
					
					<div style="width:100%;float: left;">
						<div style="height:90px;width:100%;display: flex; align-items: center; justify-content: center;flex-wrap: wrap;">
							<FormItem  prop="name" label="" style="width:80%;">
								<div style="font-size: 1rem;width:150rem;text-align: left;width:100%;float: left;">姓名</div>
								<Input v-model="params.name" placeholder="请输入学生姓名" clearable style="width:100%;font-size: 1rem;height: 40px;"></Input>
							</FormItem>
						</div>
					</div>
					
					<div style="width:100%;float: left;margin-top:20px;">
						<div style="height:90px;width:100%;display: flex; align-items: center; justify-content: center;flex-wrap: wrap;">
							<FormItem  prop="sfzh" label="" style="width:80%;">
								<div style="font-size: 1rem;width:150rem;text-align: left;width:100%;float: left;">身份证号码</div>
								<Input v-model="params.sfzh" placeholder="请输入学生身份证号码" clearable style="width:100%;font-size: 1rem;height: 40px;"></Input>
							</FormItem>
						</div>
					</div>
					
					
					<div style="width:100%;height: 60px;line-height: 60px;float:left;display: flex;align-items: center;justify-content: center;">
						<!-- <input type="button" class="login-button" value="确    定" v-on:click="listNewStudent()"> -->
						<Button type="primary" style="width:250px;font-size: 1rem;" @click="listNewStudent()">确    定</Button>
					</div>
			   </div> 
			</Form>
		</div>
		
		<div v-if="showdetail"  style="width:100%;float: left;margin-top:20px;">
			<Form>
				<div style="width:100%;height: 40px;line-height: 40px;float:left;text-align: center;font-size:1rem;font-weight:bold;">
						<label>姓名：{{detailinfo.NAME}}</label>
				</div>
			
				<div style="width:100%;height: 40px;line-height: 40px;float:left;text-align: center;font-size:1rem;font-weight:bold;">
						<label>身份证号码：{{detailinfo.SFZH}}</label>
				</div>
				
				<div style="width:100%;height: 40px;line-height: 40px;float:left;text-align: center;font-size:1rem;font-weight:bold;">
					<label>班级：{{detailinfo.BJ}}</label>
				</div>
				
				<div style="width:100%;height: 40px;line-height: 40px;float:left;text-align: center;font-size:1rem;font-weight:bold;">
					<label>班主任：{{detailinfo.BZR}}</label>
				</div>
			</Form>
			
		</div>
	</div>
</template>

<script>
	import detail from './detail.vue'
	export default {
		name:"newstu",
		data() {
			return {
				showdetail:false,
				detailinfo:{},
				ruleValidate: {
					name: [
		                {required: true, message: '请输入学生姓名！', trigger: 'blur'},
		            ],
		            sfzh: [
		                {required: true, message: '请输入学生身份证号码！', trigger: 'blur'}
		            ]
		        },   
	            params:{
	            	name:'', //学生姓名
					sfzh:'',//身份证号码
	            },
			}
		},
		methods: {
			listNewStudent:function(){
				this.$refs.params.validate((valid) => {
					if (valid){
						const params={...this.params};
						this.$http.post("/host/readbook/wxsyc/listNewStudent.html",params)
						.then(result => {
							if(result.result){
								this.detailinfo=result;
								this.showdetail=true;
							}else{
								this.$Modal.error({
						            title: "提示",
						            content: result.msg
						        });	
							}
						});
	                }
	            })
	        }
		},
		mounted() {
		},
		watch:{

		},
		computed: {
			height:function(){
				return document.documentElement.clientHeight+"px";
			}
		},
		components:{
			detail
		},
		
	}
</script>

<style>
	.login-button {
		width: 300px; 
		height: 38px;
		line-height:38px ;
		color: #fff;                      	
	    background-color: #57a3f3;
	    text-align: center;
	    margin: 0;
	    border: 1px solid transparent;
	    border-radius:2px;
	    font-size: 15px;
	}
</style>
